<template>
    <div>
        <el-button type="text" icon="el-icon-back" size="mini" @click="back">返回</el-button>
        <el-card style="font-size: 14px;">
            <el-row type="flex" justify="space-between">
                <el-col :span="4" style="border:1px solid gray;border-radius: 5px;">
                    <div style="padding:0px 20px 20px 20px;">
                        <h4>发送员工</h4>
                        <el-row>
                            <el-col :span="10">
                                <span>{{emp.empName}}</span>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
                <el-col :span="4" style="border:1px solid gray;border-radius: 5px;">
                    <div style="padding:0px 20px 20px 20px;">
                        <h4>客户邀请</h4>
                        <el-row>
                            <el-col :span="10">
                                已邀请：<span></span>
                            </el-col>
                            <el-col :span="10">
                                未邀请：<span></span>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
                <el-col :span="4" style="border:1px solid gray;border-radius: 5px;">
                    <div style="padding:0px 20px 20px 20px;">
                        <h4>客户入群</h4>
                        <el-row>
                            <el-col :span="10">
                                已入群：<span></span>
                            </el-col>
                            <el-col :span="10">
                                未入群：<span></span>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
                <el-col :span="9"></el-col>
            </el-row>
        </el-card>
        <el-card>
            <el-form v-model="missionForm" :inline="true" label-width="120">
                <h4>基础信息：</h4>
                <el-form-item label="任务名称" style="width: 45%">
                    <el-tag>{{missionForm.missionName}}</el-tag>
                </el-form-item>
                <el-form-item label="负责员工：" style="width: 45%">
                    <el-tag>{{emp.empName}}</el-tag>
                </el-form-item>
                <h4>群设置:</h4>
                <el-form-item label="群引导语:" style="width: 45%">
                    <el-tag>{{missionForm.messageMap.message}}</el-tag>
                </el-form-item>
                <el-form-item label="群聊:" style="width: 45%">
                    <el-tag>{{clientGroup.clientGroupName}}</el-tag>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card>
            <el-tabs v-model="tabCurrent" type="card" style="padding:0px 20px;">
                <el-tab-pane label="客户详情" name="first">
                    <el-table :data="customerData" :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
                        <el-table-column align="center" type="selection" width="60">
                        </el-table-column>
                        <el-table-column sortable prop="chatName" label="客户名称">
                        </el-table-column>
                        <el-table-column sortable prop="joinTime" label="入群日期">
                        </el-table-column>
                        <el-table-column sortable prop="joinType"  label="入群方式">
                        </el-table-column>
                        <el-table-column sortable prop="invitor" label="邀请员工">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" size="small">客户详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
<!--                    <div style="display: flex; justify-content: flex-end;">-->
<!--                        <el-pagination-->
<!--                            @size-change="handleSizeChange"-->
<!--                            @current-change="handleCurrentChange"-->
<!--                            :current-page="currentPage4"-->
<!--                            :page-sizes="[10, 20, 30, 40]"-->
<!--                            :page-size="10"-->
<!--                            layout="total, sizes, prev, pager, next, jumper"-->
<!--                            :total="1">-->
<!--                        </el-pagination>-->
<!--                    </div>-->
                </el-tab-pane>
                <el-tab-pane label="员工详情" name="second">
                    <el-table :data="empData" @selection-change="rowChange" :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
                        <el-table-column align="center" type="selection" width="60">
                        </el-table-column>
                        <el-table-column sortable prop="chatName" label="成员名称" width="200">
                        </el-table-column>
                        <el-table-column prop="pushTime" label="需要发送的客户数"></el-table-column>
                        <el-table-column prop="sopType" label="已邀请"></el-table-column>
                        <el-table-column prop="clientGroup" label="已入群"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button @click="" type="text" size="small">员工详情</el-button>
                                <el-button @click="" type="text" size="small">提醒发送</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script>
    import empData from "../../security/content/empData";

    export default {
        name: "detail",
        props: {
            group: {
                type: Object,
                default() {
                }
            }
        },
        data() {
            return {
                missionForm: {...this.group},
                tabCurrent: 'first',
                customerData: [],
                empData: [],
                emp: {},
                clientGroup: {},
            }
        },
        mounted() {
            this.queryDataHandle()
        },
        methods: {

            queryDataHandle() {
                let that = this
                let payload = {
                    empId: that.detailData.empId
                }
                this.$request("/api/emp/getStaffInfo/1_0", payload, "POST").then((data) => {
                    that.emp = data.data
                })
                this.$request("/api/custGroup/selectGroupById/1_0", {clientGroupId:this.group.messageMap.client_group} , "POST").then((data) => {
                   that.clientGroup = data.data
                })
                this.$request("/api/custGroup/selectDetailedList/1_0",{clientGroupId:this.group.messageMap.client_group}, "POST").then((data) => {
                    let listData = data.rows
                    for(let i=0 ; i<listData.length ; i++){
                        if(listData[i].chatType == '1'){
                            that.empData.push(listData[i])
                        }else{
                            that.customerData.push(listData[i])
                        }
                    }
                })
            },

            back() {
                this.$emit("currentHandle", 'list')
            },
            rowChange() {

            },
        }
    }
</script>

<style scoped>

</style>
